<template>
	<view class="main">
		<view class="form">
		<view class="item flex">
			<view class="name"> 姓名：</view>
			<input type="text" v-model="form.c_name" @blur="selectTwoEntryStaff" placeholder="请输入姓名">
		</view>
		<view class="item flex">
			<view class="name"> 电话： </view>
			<input type="tel" v-model="form.mobile" @blur="selectTwoEntryStaff" placeholder="请输入电话">
		</view>
		<view class="item flex">
			<view class="name"> 性别： </view>
			<picker @change="bindPickerChange6" :range="genderList" range-key="name">
				<input type="text" disabled :value="genderText" placeholder="请选择">
			</picker>
			<uni-icons type="right" ></uni-icons>
		</view>
	
		<view class="item flex">
			<view class="name"> 职场： </view>
			<picker @change="bindPickerChange1" :range="sendList" range-key="name">
				<input type="text" disabled :value="sendText" placeholder="请选择">
			</picker>
			<uni-icons type="right" ></uni-icons>
		</view>
		<view class="item flex">
			<view class="name"> 是否二次入职： </view>
			<picker @change="bindPickerChange5" :range="twoentryList" range-key="name">
				<input type="text" disabled :value="twoentryText" placeholder="请选择">
			</picker>
			<uni-icons type="right" ></uni-icons>
		</view>
		
		<view class="item flex" @click="showPop">
			<view class="name"> 团队： </view>
			<input type="text" disabled v-model="teamText" placeholder="请选择">
<!-- 			<picker @change="bindPickerChange2" :range="teamList" range-key="name" searchable=true>
				<input type="text" disabled :value="teamText" placeholder="请选择">
			</picker> -->
	<!-- 		<hy-popup-select :v-model="team_id" :list="teamList"  ref="popupRef" @save="done">
				<template slot-scope="{item,index}">
					<view>
						{{item.name}} {{item.id}}
					</view>
				</template>
			</hy-popup-select> -->
			<lzcPicker ref="lzcPicker" @change="bindPickerChange2" :pickerList="teamList" pickerTittle='选择团队' />
			<uni-icons type="right" ></uni-icons>
		</view>
		<view class="item flex" @click="showPop1">
			<view class="name"> 职位： </view>
			<input type="text" disabled :value="positionText" placeholder="请选择">
			<lzcPicker ref="lzcPicker1" @change="bindPickerChange3" :pickerList="positionList" pickerTittle='选择职位' />
			<!-- <picker @change="bindPickerChange3" :range="positionList" range-key="name">
				<input type="text" disabled :value="positionText" placeholder="请选择">
			</picker> -->
			<uni-icons type="right" ></uni-icons>
		</view>
		<view class="item flex" @click="showPop2">
			<view class="name"> 推荐人： </view>
			<input type="text" disabled :value="refereeText" placeholder="请选择">
			<lzcPicker ref="lzcPicker2" @change="bindPickerChange4" :pickerList="refereeList" pickerTittle='选择推荐人' />
			<!-- <picker @change="bindPickerChange3" :range="positionList" range-key="name">
				<input type="text" disabled :value="positionText" placeholder="请选择">
			</picker> -->
			<uni-icons type="right" ></uni-icons>
		</view>
			
		</view>
		<view class="btn" @click="confirm">
			提交
		</view>
		<yfx-tooltip ref="tooltip"></yfx-tooltip>
	</view>
</template>

<script>
	import lzcPicker from '@/components/lzc-picker/lzc-picker.vue'
	export default{
		components: {
			lzcPicker
		},
		data(){
			return{
				form:{
					id    : '0',
					c_name: '',
					mobile: '',
					area: '',
					position_id: '53',
					team_id: '',
					referee_staff_id: '',
					two_entry:'0',
					gender:'1'
				},
				storageList: [],
				sendList:[
					{name:'中科',val:'zk'},
					{name:'海联',val:'hl'},
					{name:'济南',val:'jn'},
					{name:'青岛',val:'qd'},
					{name:'武汉',val:'wh'},
					{name:'西安',val:'xa'},
					{name:'天津',val:'tj'},
				],
				twoentryList:[
					{name:'否',val:'0'},
					{name:'是',val:'1'},
				],
				genderList:[
					{name:'男',val:'1'},
					{name:'女',val:'2'},
				],
				twoentryText: '否',
				genderText: '男',
				sendText: '',
				teamList:[],
				teamText: '',
				positionList:[],
				positionText: 'H-试用期客户经理',
				refereeList:[],
				refereeText: '',
				showCatePop: false
			}
		},
		onLoad(e){
			if(e.id){
				this.form.id = e.id;
				this.getDetail(e.id);
			}
			this.getPositionList();
			this.getTeamList();
			this.getRefereeList();
		},
		methods:{
			getDetail(id){
				if(id > 0){
					this.$http.getEntryStaffDetail({id:id}).then(res => {
						if (res.code == 1) {
							this.form.c_name   			= res.data.c_name;
							this.form.mobile   			= res.data.mobile;
							this.form.area         		= res.data.area;
							this.form.position_id  		= res.data.position_id;
							this.form.team_id           = res.data.team_id;
							this.form.referee_staff_id  = res.data.referee_staff_id;
							this.form.two_entry 	    = res.data.two_entry;
							this.form.gender   			= res.data.gender;
							this.twoentryText           = res.data.twoentry_text;
							this.sendText               = res.data.send_text;
							this.teamText               = res.data.group_text;
							this.positionText           = res.data.role_text;
							this.refereeText            = res.data.referee_text;
							this.genderText             = res.data.gender_text;
						}
					});
				}
			},
			selectTwoEntryStaff(e){
				if(this.form.c_name && this.form.mobile){
					this.$http.selectTwoEntryStaff({'c_name':this.form.c_name,'mobile':this.form.mobile}).then(res => {
						if (res.code == 1 && res.data.two_entry == 1) {
							this.$refs.tooltip.open({
								msg: '注意',//标题
								content: '请注意此员工可能是二次入职员工！',//提示内容
								showCancel: false//不显示取消按钮
							})
						}
					});
				}
			},
			getPositionList(){
				this.$http.getRoleList({}).then(res => {
					if (res.code == 1 && res.data) {
						this.positionList = res.data.role_list;
						if(this.form.id == '0'){
							this.form.position_id = res.data.default_role;
							this.positionText     = res.data.default_role_name;
							this.form.area	      = res.data.area;
							this.sendText         = res.data.area_name;
						}
					}
				});
			},
			getTeamList(){
				this.$http.getGroupList({}).then(res => {
					if (res.code == 1 && res.data) {
						this.teamList = res.data;
					}
				});
			},
			getRefereeList(){
				this.$http.getRefereeList({}).then(res => {
					if (res.code == 1 && res.data) {
						this.refereeList = res.data;
					}
				});
			},
			bindPickerChange1(e){
				this.form.area = this.sendList[e.detail.value].val;
				this.sendText = this.sendList[e.detail.value].name;
				if( this.form.area == 'zk' && this.form.two_entry == 1 ){
					this.form.position_id = 32;
					this.positionText = 'H-客户经理';
				}
			},
			bindPickerChange5(e){
				this.form.two_entry = this.twoentryList[e.detail.value].val;
				this.twoentryText = this.twoentryList[e.detail.value].name;
				if( this.form.area == 'zk' && this.form.two_entry == 1 ){
					this.form.position_id = 32;
					this.positionText = 'H-客户经理';
				}
			},
			bindPickerChange2(e){
				this.form.team_id = e.id;
				this.teamText = e.name;
			},
			bindPickerChange3(e){
				this.form.position_id = e.id;
				this.positionText = e.name;
			},
			bindPickerChange4(e){
				this.form.referee_staff_id = e.id;
				this.refereeText = e.name;
			},
			bindPickerChange6(e){
				this.form.gender = this.genderList[e.detail.value].val;
				this.genderText = this.genderList[e.detail.value].name;
			},
			confirm(){
				let list = []
				this.$http.addEntryStaff(this.form).then(res=>{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
						if(res.code == 1){
							setTimeout(res=>{
								uni.navigateBack()
							},1500)
						}
					})
			},
			showPop(){
				this.$refs.lzcPicker.handleShow()
			},
			showPop1(){
				this.$refs.lzcPicker1.handleShow()
			},
			showPop2(){
				this.$refs.lzcPicker2.handleShow()
			},
			showPop3(){
				this.$refs.lzcPicker3.handleShow()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #f6f6f6;
		min-height: 100vh;
		border-top: 1rpx solid #f6f6f6;
	}
	.form{
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		position: relative;
		background-color: #fff;
		width: 690rpx;
		border-radius: 20rpx;
		margin: 20rpx auto 0rpx;
		box-shadow: 0rpx 0rpx 10rpx 20rpx rgba(0, 0, 0, .02);
		.item{
			position: relative;
			height: 80rpx;
			align-items: center;
			.name{
				margin-right: 20rpx;
				white-space: nowrap;
			}
			input{
				border-bottom: 1rpx solid #eee;
				flex: 1;
				text-align: right;
				padding-right: 30rpx;
				height: 80rpx;
				&::placeholder{
					color: #f00;
				}
			}
			picker{
				flex: 1
			}
			uni-icons{
				position: absolute;
				right: -10rpx;
			}
		}
		.goods{
			padding: 10rpx 0;
			border-radius: 10rpx;
			background-color: #f7b50020;
			.items{
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				color: #666;
				align-items: center;
				.name{
					white-space: nowrap;
				}
				input{
					margin-left: 15rpx;
					text-align: center;
					background-color: #fff;
				}
				.del{
					min-width: 32rpx;
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
			}
		
		}
	}
	.btn{
		width: 690rpx;
		height: 80rpx;
		color: #fff;
		background-color: #3784ff;
		text-align: center;
		line-height: 80rpx;
		margin: 100rpx auto;
		border-radius: 10rpx;
	}
</style>